<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title内容</title>
    <style>
        body {
            height: 3000px;
            width: 2000px;
        }

        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 3px;
            border: 8px solid red;
            float: left;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div>
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
        静，能寒窗苦守；动，能点石成金。
    </div>
    <div>
        你好
        你好
        你好
        你好
    </div>
    <script>
        // 内容超过盒子 就是内容的宽高度(和client的区别)
        var d1 = document.getElementsByTagName("div")[0];
        console.log(d1.scrollWidth, d1.scrollHeight);

        // 内容不超过盒子大小 就是width 和 padding，不包括 border和margin。（和client一样）
        var d2 = document.getElementsByTagName('div')[1]
        console.log(d2.scrollWidth, d2.scrollHeight);

        // 判断有无声明dtd 
        console.log('有声明', document.compatMode === "CSS1Compat", '无声明', document.compatMode === "BackCompat");
        // 有DTD声明的时候用这个去拿到
        console.log(document.documentElement.scrollTop, '有dtd声明时候用这个去拿scrollTop/left');

        // 滚动网页的时候就会调用这个方法
        window.onscroll = function () {

            // scrollLeft获取水平滚动条滚动的距离。 scrollTop获取垂直滚动条滚动的距离
            console.log(
                'scrollheight',
                // 兼容性写法
                window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
                'scrollwidth',
                //兼容性写法
                window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
                
            )
        }

        // 获取html元素的方法
        console.log('title内容',document.title, document.body , document.head,  'html标签', document.documentElement);



    </script>
</body>

</html>